<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form :inline="true" :model="listQuery" ref="dataList2" class="demo-form-inline">
            <el-input class="marginRB10" v-model="listQuery.user_id" placeholder="踢人者ID" style="width:200px;"
                      clearable></el-input>
            <el-input class="marginRB10" v-model="listQuery.nickname" placeholder="踢人者昵称" style="width:200px;"
                      clearable></el-input>
            <el-input class="marginRB10" v-model="listQuery.user_id_out" placeholder="被踢人ID" style="width:200px;"
                      clearable></el-input>
            <el-input class="marginRB10" v-model="listQuery.nickname_out" placeholder="被踢人昵称" style="width:200px;"
                      clearable></el-input>
            <el-input class="marginRB10" v-model="listQuery.room_id" placeholder="房间ID" style="width:200px;"
                      clearable></el-input>
            <el-input class="marginRB10" v-model="listQuery.room_name" placeholder="房间名称" style="width:200px;"
                      clearable></el-input>
            <el-button type="primary" @click="searchList" icon="el-icon-search" class="marginRB10">搜索</el-button>
            <!-- <el-button type="primary" @click="exportExcel" icon="el-icon-download"  class="marginRB10">导出报表</el-button> -->
          </el-form>
        </el-row>
      </div>
      <div class="item">
        <el-table ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="user_id" label="踢人者id"></el-table-column>
          <el-table-column prop="nickname" label="踢人者昵称"></el-table-column>
          <el-table-column prop="user_id_out" label="被踢人id"></el-table-column>
          <el-table-column prop="nickname_out" label="被踢人昵称"></el-table-column>
          <el-table-column prop="room_id" label="房间id"></el-table-column>
          <el-table-column prop="room_name" label="房间名称"></el-table-column>
          <el-table-column prop="add_time" label="踢人时间"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.perPage"
          @pagination="getList"
        />
      </div>
    </el-card>

  </div>
</template>

<script>
import {saveData, deleteData, updateData, listData, getExportExcel} from '@/api/room/kickout_log'

export default {
  data() {
    return {
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        user_id: '',
        user_id_out: '',
        nickname: '',
        nickname_out: '',
        room_id: '',
        room_name: '',
        start_at: '',
        end_at: ''
      },
      menuList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      form: {
        id: undefined,
        name: undefined,
      },
      rules: {
        name: [{required: true, message: '请输入名字', trigger: 'blur'}],
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    searchList() {
      this.listQuery.page = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      let urlData = '?'
      if (this.listQuery.page) {
        urlData = urlData + `page=${this.listQuery.page}&`
      }
      if (this.listQuery.perPage) {
        urlData = urlData + `perPage=${this.listQuery.perPage}`
      }
      if (this.listQuery.room_name) {
        urlData = urlData + `&room_name=${this.listQuery.room_name}`
      }
      if (this.listQuery.room_id) {
        urlData = urlData + `&room_id=${this.listQuery.room_id}`
      }
      if (this.listQuery.nickname) {
        urlData = urlData + `&nickname=${this.listQuery.nickname}`
      }
      if (this.listQuery.user_id) {
        urlData = urlData + `&user_id=${this.listQuery.user_id}`
      }
      if (this.listQuery.nickname_out) {
        urlData = urlData + `&nickname_out=${this.listQuery.nickname_out}`
      }
      if (this.listQuery.user_id_out) {
        urlData = urlData + `&user_id_out=${this.listQuery.user_id_out}`
      }
      listData(urlData).then(response => {
        this.menuList = response.data.list
        this.total = response.data.meta.total
        this.listLoading = false
      })
    }
  }
}
</script>
